import React, { PureComponent } from 'react'
import { withRouter } from "react-router-dom";
import { Button, Form, Input } from "antd";
const FormItem = Form.Item;
import { TipPage } from './TipPage';
import { connect } from "react-redux";
import { getQuery } from "@utils/setUrlQuery";
import {
    sendVerifyCode,
    ticketRegister
} from "@sagas/user";
import { telephoneValidation } from '@utils/regex'
import VerificationCode from "@common/presentational/VerificationCode";
import { loaderWeiXinSDK, closeWxWindow } from '@pages/mobile/actions/weixin'
@connect(null, {
    sendVerifyCode,
    ticketRegister
})
@withRouter
class MobileLoginPage extends PureComponent {
    constructor(props) {
        super(props);
        const { ticket } = getQuery(props)
        this.state = {
            ticket,
            registerSuccess: false
        }
        this.formRef = React.createRef()

        this.handleSubmit = this.handleSubmit.bind(this)
        this.submitForm = this.submitForm.bind(this)
    }

    submitForm() {
        this.formRef.current?.submit()
    }

    handleSubmit(values) {
        const { ticket } = this.state
        const { ticketRegister } = this.props;
        ticketRegister({
            ticket,
            mobile: values.mobile,
            code: values.code,
            code_type: 'register'
        }, (res) => {
            this.setState({
                registerSuccess: true
            })
        })
    }

    componentDidMount() {
        document.title = '绑定手机号'
        document.querySelector('body').setAttribute('style', 'min-width: 100vw')
        loaderWeiXinSDK()
    }

    componentWillUnmount() {
        document.querySelector('body').removeAttribute('style')
    }

    render() {
        const { registerSuccess } = this.state
        if (registerSuccess) {
            return (
                <TipPage type="success" message="登录成功" action={closeWxWindow}  />
            )
        }
        return (
            <div className="bilin-web-mobile">
                <Form
                    ref={this.formRef}
                    name="mobile-register"
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 20 }}
                    onFinish={this.handleSubmit}
                >
                    <FormItem
                        name='mobile'
                        rules={[
                            { required: true, message: '请输入手机号', },
                            { pattern: telephoneValidation, message: '请输入正确的手机号' }
                        ]}
                    >
                        <Input className='normal-input' placeholder="请输入手机号" length={11} />
                    </FormItem>
                    <div className="code-value-with-button">
                        <Form.Item
                            noStyle
                            shouldUpdate={(prevValues, currentValues) => prevValues.mobile !== currentValues.mobile}
                        >
                            {({ getFieldValue }) => {
                                return telephoneValidation.test(getFieldValue('mobile')) ? (
                                    <Form.Item
                                        name='code'
                                        rules={[
                                            { required: true, message: '请输入验证码', },
                                        ]}
                                    >
                                        <VerificationCode codeType="register" mobileNumber={this.formRef.current?.getFieldValue('mobile')} />
                                    </Form.Item>
                                ) : null
                            }}
                        </Form.Item>
                    </div>
                    <Button type="primary"
                        className='button-green'
                        onClick={this.submitForm}
                    >确定</Button>
                </Form>
            </div>
        )
    }
}

export default MobileLoginPage